<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { staffAdd, staffEdit, staffShow, getXfmoney } from "@/http/api";

export default {
  components: { outMain },
  name: "",
  data() {
    const checkPhone = (rule, value, callback) => {
      let result = this.$ruleCheck.checkPhone(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkRatio = (rule, value, callback) => {
      let result = this.$ruleCheck.checkRatio(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkIdCard = (rule, value, callback) => {
      let result = this.$ruleCheck.checkIdCard(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkTime_before = (rule, value, callback) => {
      let result = this.$ruleCheck.checkTime_before(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    return {
      detailId: this.$route.query.id,
      formData: {
        staff_user_name: "",
        staff_user_mobile: "",
        staff_tc_ratio: "",
        staff_sex: 1,
        staff_idcard: "",
        staff_entry_time: "",
        staff_remark: "",
      },
      rules: {
        staff_user_name: [
          {
            required: true,
            message: "请输入员工姓名",
            trigger: "blur",
            min: 0,
            max: 10,
          },
        ],
        staff_user_mobile: [
          {
            validator: checkPhone,
            required: true,
            trigger: "blur",
          },
        ],
        staff_tc_ratio: [
          {
            validator: checkRatio,
            required: true,
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {},
  setup() {},
  methods: {
    getStaffCoin() {
      getXfmoney().then((res) => {
        if (res.data.code == 1) {
          this.coin_num = res.data.data;
        }
      });
    },
    async checkSave() {
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }
      if (this.detailId) {
        this.saveFn();
      } else {
        ElMessageBox.confirm(
          `开通员工账号需扣除${this.coin_num}鲸币，是否继续开通?`,
          "账号开通提示",
          {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.saveFn();
          })
          .catch(() => {});
      }
    },
    async saveFn() {
      const { data } = this.detailId
        ? await staffEdit(this.formData)
        : await staffAdd(this.formData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: this.detailId ? "编辑成功" : "新增成功",
        });
        if (!this.detailId) {
          if (localStorage.getItem("addStaffInfo")) {
            localStorage.removeItem("addStaffInfo");
          }
        }
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      } else if (data.code == 0) {
        if (data.msg == "鲸币不足，无法进行此操作") {
          ElMessageBox.confirm(`账户鲸币不足，是否前往充值?`, "温馨提示", {
            confirmButtonText: "前往充值",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              console.log(this.formData);
              localStorage.setItem(
                "addStaffInfo",
                JSON.stringify(this.formData)
              );
              this.$router.push({ path: "/comCenter" });
            })
            .catch(() => {});
        }
      }
    },
    getData() {
      staffShow({ staff_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
          this.formData.staff_entry_time = new Date(
            res.data.data.staff_entry_time
          );
          this.formData["staff_id"] = this.detailId;
        }
      });
    },
    backFn() {
      this.$router.back();
    },
  },
  mounted() {},
  created() {
    if (this.detailId) {
      this.getData();
    } else {
      if (localStorage.getItem("addStaffInfo")) {
        this.formData = JSON.parse(localStorage.getItem("addStaffInfo"));
      }
      this.getStaffCoin();
    }
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>{{ detailId ? "编辑" : "新增" }}用户</div>
        <btn value="返回上一级" @ok="backFn"></btn>
      </div>
      <div class="formMain">
        <el-form :rules="rules" :model="formData" ref="ruleForm">
          <div class="flexCont">
            <el-form-item
              label="员工姓名"
              label-width="120"
              prop="staff_user_name"
            >
              <el-input
                clearable
                placeholder="请输入员工姓名"
                v-model="formData.staff_user_name"
              />
            </el-form-item>
            <el-form-item label="员工性别" label-width="120" prop="userSex">
              <el-radio-group v-model="formData.staff_sex">
                <el-radio :value="1">男</el-radio>
                <el-radio :value="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="手机号"
              label-width="120"
              prop="staff_user_mobile"
            >
              <el-input
                clearable
                maxlength="11"
                placeholder="请输入员工手机号"
                v-model="formData.staff_user_mobile"
              />
            </el-form-item>
            <el-form-item
              label="身份证号"
              label-width="120"
              prop="staff_idcard"
            >
              <el-input
                clearable
                maxlength="18"
                placeholder="请输入员工身份证号"
                v-model="formData.staff_idcard"
              />
            </el-form-item>
            <el-form-item label="签约提成" label-width="120">
              <el-input
                placeholder="请输入签约提成比例"
                clearable
                v-model="formData.staff_tc_ratio"
                ><template #append>%</template></el-input
              >
            </el-form-item>
            <el-form-item
              label="入职时间"
              label-width="120"
              prop="staff_entry_time"
            >
              <el-date-picker
                class="datePull"
                v-model="formData.staff_entry_time"
                type="date"
                clearable
                placeholder="请选择员工入职时间"
              />
            </el-form-item>

            <el-form-item
              class="flexPull"
              label="备注"
              label-width="120"
              prop="userName"
            >
              <el-input
                v-model="formData.staff_remark"
                maxlength="3000"
                placeholder="请输入备注"
                show-word-limit
                :rows="8"
                type="textarea"
              />
            </el-form-item>
            <el-form-item class="flexPull" label=" " label-width="120">
              <btn
                :value="detailId ? '确认编辑' : '确认新增'"
                @ok="checkSave"
              ></btn>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
